<template>

     <div class="blogtop">
         <h2   class="blog_author">HYH博客</h2>
       <div class="blog_nav">

         <!--<el-menu   ref="items"  id="nav"    text-color="#FFFFFF"  mode="horizontal"  active-text-color="#C4E1FF" >-->
           <!--<el-menu-item index='1' @click="goto('/index',$event)">首页</el-menu-item>-->
           <!--&lt;!&ndash;<el-menu-item index='1' @click="goto('/index',$event)" :style="{'border-bottom-color':(checked==1?'skyblue':'transparent')}">首页</el-menu-item>&ndash;&gt;-->
           <!--<el-menu-item index='2' @click="goto('/blog',$event)" >博客</el-menu-item>-->
           <!--<el-menu-item index='3' @click="goto('/msgBroad',$event)">留言</el-menu-item>-->
           <!--<el-menu-item index='4' @click="goto('/aboutMe',$event)">关于我</el-menu-item>-->
         <!--</el-menu>-->
         <el-menu   ref="items"  id="nav"  router   text-color="#FFFFFF"  mode="horizontal"  active-text-color="#C4E1FF" >
           <el-menu-item index='/index' >首页</el-menu-item>
           <!--<el-menu-item index='1' @click="goto('/index',$event)" :style="{'border-bottom-color':(checked==1?'skyblue':'transparent')}">首页</el-menu-item>-->
           <el-menu-item index='/blog' >博客</el-menu-item>
           <el-menu-item index='/msgBroad'>留言</el-menu-item>
           <el-menu-item index='/aboutMe'>关于我</el-menu-item>
         </el-menu>
       </div>
     </div>

</template>

<script>
  export default {
    data () {
      return{
        // checked:''

      }
    },
    methods:{

      goto(value,event){
        // this.checked=event.index
        //  console.log(this.checked)
        this.$router.push(value)


      }
    }
  }
</script>

<style scoped>
  .blogtop{

    height: 60px;
    width: 100%;
    /*background-color: skyblue;*/
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1000;
  }
  .blog_author{
      float: left;
      height: 60px;
      margin-left: 8%;
      line-height: 60px;
    /*background-color: rebeccapurple;*/
       color: #FFFFFF;
    font-size: 26px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    font-style: italic;
  }
  .blog_nav{
    float: right;
     height: 60px;
    position: relative;
    background-color: red;
    width: 50%;
    background-color: rgba(0,0,0,0);

  }
  #nav{
     position: absolute;
     right: 0;
    width: 80%;
    background-color: rgba(0,0,0,0);



  }

  #nav   .el-menu-item{
      margin: 0 5%;
    font-size: 16px;
     font-weight: bolder;
    background-color: rgba(0,0,0,0);
    /*border-bottom-color: red;*/
  }

  #nav {
     border-bottom: rgba(0,0,0,0);

  }

  /*.is_hover{*/
       /*border-color: aqua ;*/
  /*}*/


</style>
